<template>
    <el-container>
      <div class="box">
        <el-card style="width: 400px; height: auto;" shadow="hover">
          <div style="text-align: center;font-weight: 1000;font-size: 20px">
            <span>个人信息</span>
          </div>
          <div style="text-align: center; margin-bottom: 5px;margin-top: 10px">
              <el-avatar
                  :src="getImgPath(user.icon)"
                  :size="150"
                  style="margin-top: 10px"
              />
          </div>
          <el-row class="row1">
            <el-col v-model="user">
              <p><span><el-icon><User /></el-icon>用户名称</span>{{ user.realname }}</p>
              <p><span><el-icon><Phone /></el-icon>手机号码:</span>{{ user.phone }}</p>
              <p><span><el-icon><Message /></el-icon>用户邮箱:</span>{{ user.email }}</p>
              <p><span><el-icon><Reading /></el-icon>所属部门:  </span>{{ user.deptmentName }}</p>
              <p><span><el-icon><Star /></el-icon>挂号级别:</span>  {{ user.registName }}</p>
              <p><span><el-icon><Bell /></el-icon>值班日期:</span> {{ user.schedulingName }}</p>
            </el-col>
          </el-row>
        </el-card>

        <!-- 基本信息 -->
        <el-card style="width: 600px; height: auto;" shadow="hover">
          <div style="text-align: center;font-weight: 1000;font-size: 20px">
            <span>基本信息</span>
          </div>
          <el-tabs v-model="activeTab" class="demo-tabs">
              <el-tab-pane label="用户信息" name="first">
                <el-form :rules="rules" ref="first" :model="data" label-position="top" label-width="100px">
                  <el-form-item label="用户昵称" prop="realname" label-width="100px">
                    <el-input v-model="data.realname" placeholder="请输入用户昵称" />
                  </el-form-item>
                  <el-form-item label="手机号码" prop="phone">
                    <el-input v-model="data.phone" maxlength="64" placeholder="请输入手机号码" />
                  </el-form-item>
                  <el-form-item class="button1">
                    <el-button type="primary" @click="saveUserPhoneAndName">保存</el-button>
                    <el-button type="danger" @click="resetUser">重置</el-button>
                  </el-form-item>
                </el-form>
              </el-tab-pane>
              <el-tab-pane label="邮箱修改" name="second">
                <el-form :rules="rules" ref="second" :model="data" label-position="top" label-width="100px">
                <el-form-item label="用户邮箱" prop="email">
                  <el-input v-model="data.email" maxlength="128" placeholder="请输入用户邮箱" />
                </el-form-item>
                <el-form-item class="button1">
                  <el-button type="primary" @click="saveUserEmail">保存</el-button>
                  <el-button type="danger" @click="resetUser">重置</el-button>
                </el-form-item>
                </el-form>
              </el-tab-pane>
              <el-tab-pane label="密码修改" name="third">
                <el-form :rules="rules" ref="third" :model="data" label-position="top" label-width="100px">
                <el-form-item label="旧密码" prop="oldpassword">
                  <el-input v-model="data.oldpassword" maxlength="128" placeholder="请输入用户旧密码" />
                </el-form-item>
                <el-form-item label="新密码" prop="password">
                  <el-input v-model="data.password" maxlength="128" placeholder="请输入用户新密码" />
                </el-form-item>
                <el-form-item class="button1">
                  <el-button type="primary" @click="saveUserPassword">保存</el-button>
                  <el-button type="danger" @click="resetUser">重置</el-button>
                </el-form-item>
                </el-form>
              </el-tab-pane>
              <el-tab-pane label="头像修改" name="fourth">
                <el-form :rules="rules" ref="fourth" :model="data" label-position="top" label-width="100px">
                  <el-form-item label="头像" prop="file">
                    <el-upload
                        v-model="data.file"
                        action="#"
                        list-type="picture-card"
                        :limit="1"
                        :auto-upload="false"
                        :on-change="changeFile"
                        :on-remove="removeFile"
                    >
                      <el-icon><Plus/></el-icon>

                    </el-upload>
                  </el-form-item>
                    <el-form-item class="button1">
                      <el-button type="primary" @click="saveUserIcon">上传</el-button>
                    </el-form-item>
                </el-form>
              </el-tab-pane>

          </el-tabs>
        </el-card>
      </div>
    </el-container>

</template>

<script setup>
import { useRoute,useRouter } from 'vue-router';
import {User,Phone,Message,Reading,Star,Bell,Plus} from '@element-plus/icons-vue'
const route = useRoute();
const router = useRouter();
import { get, post } from '@/util/axios'
import { reactive, ref } from 'vue'
import {getImgPath} from "@/util/index.js";
import { EmployeeStore } from '@/stores/counter'
import VueCookie from 'vue-cookie'

const employee=EmployeeStore()
const user=ref({})
const first=ref()
const second=ref()
const third=ref()
const fourth=ref()
const activeTab=ref('first')
const data=reactive({})
const rules = reactive({
  realname: [
    { required: true, message: '请输入姓名', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type:'email',message: "请输入正确邮箱",trigger: "blur"},
    { validator: (rule, value, callback) => { check(rule, value, callback, 'email') }, message: '该邮箱已经存在', trigger: 'blur'  }
  ],
  file: [
    { required: true, message: '上传头像', trigger: 'blur' }
  ],
  oldpassword: [
    { required: true, message: '请输入旧密码', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入新密码', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^(13[0-9]|14[5|7|9]|15[0-3|5-9]|16[2|5|6|7]|17[0-8]|18[0-9]|19[8|9])\d{8}$/, message: '请输入正确的手机号', trigger: 'blur' },
    { validator: (rule, value, callback) => { check(rule, value, callback, 'phone') }, message: '该手机号已经存在', trigger: 'blur'  }
  ]
})
getEmpInfo()
function getEmpInfo(){
  get('/employee/getByPhone', {phone:employee.get().value.phone},content=>{
    employee.set(content)
    user.value=employee.get().value
    data.id=employee.get().value.id
    data.realname=employee.get().value.realname
  })
}
getEditData ()
function saveUserPhoneAndName(){
  post('/employee/update', data, content => {
    VueCookie.delete('token')
    window.location.href = window.location.href
  },first)
}
function saveUserPassword(){
    post('/employee/update', data, content => {
      VueCookie.delete('token')
      window.location.href = window.location.href
    },third)

}
function saveUserEmail() {
    post('/employee/update', data, content => {
      getEmpInfo()
      getEditData()
    }, second)
}
function saveUserIcon() {
  post('/employee/update', data, content => {
    getEmpInfo()
    getEditData()
  }, fourth)
}
function resetUser(){
      data.email='',
      data.phone='',
      data.password=''
}
function check (rule, value, callback, field) {
  console.log(data.id)
  get('/employee/check', { field, value, id: data.id }, content => {
    if (content) {
      callback()
    } else {
      callback(new Error())
    }
  })
}
function getEditData () {
  get('/employee/getEditData', {}, content => {
    for (const i in content.depts){
      if (content.depts[i].id==user.value.deptmentId){
        user.value.deptmentName=content.depts[i].name
      }
    }
    for (const i in content.regists){
      if (content.regists[i].id==user.value.registLevelId){
        user.value.registName=content.regists[i].registName
      }
    }
    for (const i in content.schedulings){
      if (content.schedulings[i].id==user.value.schedulingId){
        user.value.schedulingName=content.schedulings[i].ruleName
      }
    }
  })
}
function changeFile(file){
  data.file=file.raw
}
function removeFile(){
  data.file=null
}
</script>

<style scoped lang="scss">
.el-container{
  display: flex;
  justify-content: space-around;
  .box{
    display: flex;
    gap: 70px;
    margin-top: 20px;
    margin-left: 50px;
  }
  .row1{
    .el-col{
      p{
        display: flex;
        justify-content: space-between;
        justify-items: center;
        margin-top: 20px;
        margin-left: 15px;
      }
      span{
        line-height: 10px;
        .el-icon{
          margin-right: 5px;
        }
      }
    }
  }
  .el-form{
    .el-form-item {
      display: flex;
      margin-top: 25px;
      justify-content: space-between;
      align-items: center;
      text-align: center;
    }
  }
  .button1{
    margin-left: 210px;
  }
  .el-tabs{
    margin-top: 10px;
  }
}
</style>